<script setup lang="ts">
import { onMounted, ref } from 'vue'

const tableData = ref([
    { name: '张三', rating: 1020 },
    { name: '张四', rating: 1026 },
    { name: '张五', rating: 1021 },
    { name: '王二', rating: 1023 },
    { name: '李天', rating: 1167 },
    { name: '启强', rating: 1432 },
    { name: '王甜甜', rating: 1414 },
    { name: '朱雀', rating: 1417 },
    { name: '饕餮', rating: 1235 },
    { name: '张三', rating: 1020 },
    { name: '张四', rating: 1026 },
    { name: '张五', rating: 1021 },
    { name: '王二', rating: 1023 },
    { name: '李天', rating: 1167 },
    { name: '启强', rating: 1432 },
    { name: '王甜甜', rating: 1414 },
    { name: '朱雀', rating: 1417 },
    { name: '饕餮', rating: 1235 }
])
onMounted(() => {
    tableData.value = tableData.value.sort((a, b) => b.rating - a.rating)
})
const columns = [
    {
        title: '排名',
        key: 'order',
        width: '200'
    },
    {
        title: '姓名',
        dataIndex: 'name',
        key: 'name'
    },
    {
        title: '分数',
        dataIndex: 'rating',
        key: 'rating'
    }
]
</script>
<template>
    <div
        class="flex justify-center h-125 text-2xl mb-7 flex-wrap"
    >
        <a-card
            class="w-75 h-112 font-sans mx-12 mt-12"
            shadow="hover"
        >
            {{ 2 }} <br />
            {{ tableData[1].name }} <br />
            {{ tableData[1].rating }}
        </a-card>
        <a-card
            class="w-75 h-112 font-sans mx-12"
            shadow="hover"
        >
            {{ 1 }} <br />
            {{ tableData[0].name }} <br />
            {{ tableData[0].rating }}
        </a-card>
        <a-card
            class="w-75 h-112 font-sans mx-12 mt-12"
            shadow="hover"
        >
            {{ 3 }} <br />
            {{ tableData[2].name }} <br />
            {{ tableData[2].rating }}
        </a-card>
    </div>
    <a-table
        :dataSource="tableData.slice(3)"
        :columns="columns"
        class="w-7/10 mx-auto my-0 font-sans"
    >
        <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'order'">
                {{
                    tableData.findIndex((item) => {
                        return item.name === record.name && item.rating === record.rating
                    }) + 1
                }}
            </template>
        </template>
    </a-table>
</template>
